<template>
  <div>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="formLoading" v-model="dialogShow"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin.js'
import _ from 'lodash'

export default {
  name: 'actionOverDelete',
  mixins: [commonMixin],
  props: {
    name: { type: String, default: '' },
    // formData: { type: Object, default: () => {} },
    visible: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    type: { type: Number, default: 1 },
  },
  data() {
    return {
      fields: [
        {
          title: this.$ts('sourceLine'),
          key: 'OldLineCode',
          options: [],
          name: 'select',
          filterable: true,
        },
        {
          title: this.$ts('targetLine'),
          key: 'NewLineCode',
          options: [],
          name: 'select',
          filterable: true,
          props: {
            multiple: false,
          },
        },
        {
          title: this.$ts('DateRange'),
          key: 'dataTime',
          name: 'dateTime',
          props: {
            type: 'daterange',
            valueFormat: 'yyyy-MM-dd',
            rangeSeparator: '至',
            startPlaceholder: this.$ts('StartDate'),
            endPlaceholder: this.$ts('EndDate'),
          },
        },
        {
          title: this.$ts('ShiftType'),
          key: 'ShiftType',
          options: [],
          name: 'select',
        },
      ],
    }
  },
  watch: {
    visible(v) {
      if (!v) this.data = {}
    },
    type: {
      deep: true,
      immediate: true,
      handler(v) {
        let tmp = this.getFieldConfig('NewLineCode')
        if (v == 1) {
          let options = [
            { label: this.$ts('DayShift'), value: '1' },
            { label: this.$ts('NightShift'), value: '2' },
          ]
          tmp.props.multiple = false
          this.data.NewLineCode = ''
          // this.$set(this.data, 'NewLineCode', '')
          this.setFieldOptions('ShiftType', options, 'value', 'label')
          this.hideFieldsByKey('OldLineCode', false)
        } else {
          let options2 = [
            { label: this.$ts('All'), value: '3' },
            { label: this.$ts('DayShift'), value: '1' },
            { label: this.$ts('NightShift'), value: '2' },
          ]
          tmp.props.multiple = true
          this.data.NewLineCode = []
          // this.$set(this.data, 'NewLineCode', [])
          this.setFieldOptions('ShiftType', options2, 'value', 'label')
          this.hideFieldsByKey('OldLineCode', true)
        }
      },
    },
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
    formLoading: {
      get() {
        return this.loading
      },
      set(val) {
        this.$emit('update:loading', val)
      },
    },
  },
  methods: {
    getOtherFieldConfig(fields = this.fields, fieldName) {
      var j = _.findIndex(fields, (i) => i.key == fieldName)
      if (j != -1) {
        return fields[j]
      }
      return null
    },
    hideFieldsByKey(fieldName, isHidden, fields = this.fields) {
      if (fieldName instanceof Array) {
        for (let i = 0; i < fieldName.length; i++) {
          let tmp = this.getOtherFieldConfig(fields, fieldName[i])
          tmp.hidden = isHidden
        }
      } else {
        let tmp = this.getOtherFieldConfig(fields, fieldName)
        tmp.hidden = isHidden
      }
    },
    submit() {
      this.$emit('submit', _.cloneDeep(this.data))
    },
    getLineOptions() {
      this.http.get(this.$api.leanLine + 'GetMyLineList', {
        size: 9999,
        page: 1,
      }).then((r) => {
        this.setFieldOptions('OldLineCode', r.Data, 'LineCode', 'LineCode')
        this.setFieldOptions('NewLineCode', r.Data, 'LineCode', 'LineCode')
      })
    },
    init() {
      this.getLineOptions()
    },
  },
  created() {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
.align-r {
  padding-top: 20px;
  text-align: right;
}
</style>